{extend name="../app/index/view/layout/main.html" /}

//网站标题
{block name="title"}
<title>{$article.title} - {$meta.appname}</title>
<meta name="keywords" content="{$meta.appname}:{foreach $article.tags as $k => $tag}{$tag.name},{/foreach}{$article.topic_name},{$article.category_name}">
<meta name="description" content="{$meta.appname}:{$article.brief}">
{/block}

//css资源
{block name="link"}
<!-- 第三方库css -->
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

<!-- 自定义css -->
<link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/article.css">
{/block}

//js资源
{block name="script"}
<script id="replyTpl" type="text/html">
  <div class="flex-def top-25 reply-form">
    <input type="text" autocomplete="off" class="layui-input reply-text">
    <button class="layui-btn reply-submit">提交</button>
  </div>
</script>
<script id="commentTpl" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
  <li data-id="{{ item.id }}" class="comment-item comment-id">
    <div class="comment-item-top">
      <div class="user-info">
        <a href="{{ item.userUrl }}"><img class="avatar" src="{{ item.avatar }}"></a>
        <div class="user-profile">
          <span class="user-name">{{ item.username }}</span>
          <span class="post-time">{{ item.absoluteTime}}</span>
        </div>
      </div>
    </div>
    <div class="comment-item-bot comment-text-box">
      <div class="comment-text">
        {{ item.comment }}
      </div>

      <div class="comment-op top-25">
        {if !$article.disallow}
        <a class="reply-btn" href="javascript:;">回复</a>
        {/if}
        {{#  if(item.owner){ }}
        <a class="del-btn" href="javascript:;">删除</a>
        {{#  } }}
      </div>

    </div>
    {{#  if(item.replies.length > 0){ }}
    <ul class="reply">
      {{#  layui.each(item.replies, function(index, reply){ }}
      <li data-id="{{ reply.id }}" class="comment-item">
        <div class="comment-item-top">
          <div class="user-info">
            <a href="{{ reply.userUrl }}"><img class="avatar" src="{{ reply.avatar }}"></a>
            <div class="user-profile">
              <span class="user-name">{{ reply.username }}</span>
              <span class="post-time">{{ reply.absoluteTime}}</span>
            </div>
          </div>
        </div>
        <div class="comment-item-bot comment-text-box">
          <div class="comment-text">
            {{ reply.comment }}
          </div>
          <div class="comment-op top-25">
            {if !$article.disallow}
            <a class="reply-btn" href="javascript:;">回复</a>
            {/if}
            {{#  if( reply.owner ){ }}
            <a class="del-btn" href="javascript:;">删除</a>
            {{#  } }}
          </div>
        </div>
      </li>
      {{#  }); }}
    </ul>
    {{#  } }}
    <hr class="top-25 layui-bg-gray">
  </li>
  {{#  }); }}
  {{#  if(d.length === 0){ }}
  {{#  } }}
</script>
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['layer', 'jquery','nav', 'anchor','posts', 'comment','like'], function(){
        var layer = layui.layer
            ,$ = layui.jquery
            ,anchor = layui.anchor


            ,comment = layui.comment
            ,like = layui.like
            ,posts = layui.posts;


        //文章导航
        anchor.init({
            content: $('#content').get(0),
            nav : $('#article_nav_box').get(0)
        });


        //评论列表
        let oPosts = posts.setFields({
            article_id: "{$article.id}"
        }).init({
            pageElem : $('#pagination')[0],
            count: "{$count}",
            limit : "{$limit}",

            box: '#comment_box',
            url: "{:url('comment/list')}",
            tpl: $('#commentTpl').html()
        });



        //评论功能
        comment.init({
            articleId: "{$article.id}",
            filter: 'formComment',
            formUrl: "{:url('comment/comment')}",
            delUrl: "{:url('comment/delete')}",

            replyBtn: ".reply-btn",
            delBtn: ".del-btn",
            replyText: ".reply-text",
            replySubmit: ".reply-submit",
            box: ".comment-text-box",

            tpl: $('#replyTpl').html(),

            post:oPosts
        });

        //收藏操作
        like.init({
            articleId: "{$article.id}",
            btn:'#like_btn',
            num:'#like_num',
            addUrl:"{:url('like/create')}",
            delUrl:"{:url('like/delete')}",

            likeClass : 'layui-icon-rate-solid',
            unlikeClass:'layui-icon-rate'
        });




    });
</script>
{/block}

//站点主体
{block name="body"}
<!-- body -->
<section class="body top-25">
  <div class="layui-container">
    <div class="layui-row layui-col-space20">
      <div class="layui-col-md9 flex-def">
        <!-- 文章导航 -->
        <div class="profile layui-hide-xs">
          <div id="profile" class="profile-block">
            <fieldset class="layui-elem-field layui-field-title top-25">
              <legend>文章导航</legend>
            </fieldset>
            <div class="profile_right">
              <div class="profile_right_cnt">
                <div class="profile_right_cnt_first"></div>
                <div id="article_nav_box">
                </div>
                <div class="profile_right_cnt_last"></div>
              </div>
            </div>
          </div>
        </div>

        <div style="flex:auto;" class="block">
          <!-- article -->
          <div class="article top-25">
            <!-- article-article -->
            <div class="article-title">
              <h1>{$article.title}</h1>
            </div>
            <!-- author -->
            <div class="user-info">
              <a href="{:url('user/read',['id'=>$article.user_id])}"><img class="avatar" src="{$article.avatar}"></a>
              <div class="user-profile">
                <span class="user-name">{$article.username}</span>
                <span class="post-time">{$article.create_time | absoluteTime}</span>
              </div>
            </div>
            <!-- article info -->
            <div class="article-info flex-def flex-zBetween flex-cCenter">
              <div class="category">
                <div class="post-info">
                  <span><a class="cat" href="{:url('category/read',['id'=>$article.category_id])}">{$article.category_name}</a></span>
                  {if $article.topic_id}
                  <span><a class="top" href="{:url('topic/read',['id'=>$article.topic_id])}">{$article.topic_name}</a></span>
                  {/if}
                </div>
              </div>
              <div class="post-like">
                <span>
                  <a href="javascript:;">
                    <i id="like_btn" class="layui-icon {if $liked}layui-icon-rate-solid{else}layui-icon-rate{/if}"></i>
                  </a>
                  <span id="like_num">{$article.likes_count}</span>
                </span>
                <span><i class="layui-icon layui-icon-chat"></i>  {$article.comments_count}</span>
              </div>
            </div>
            <!-- content -->
            <div class="article-content typo">
              <div id="content" class="content">
                {php}{echo $content;}{/php}
              </div>
            </div>

            <!-- tags -->
            {if count($article.tags)}
            <div class="tags flex-def flex-cCenter">
              <h3>标签： </h3>
              <div class="tags-wrap">
                {foreach $article.tags as $k => $tag}
                <a href="{:url('tag/read',['id'=>$tag.id])}"><span>{$tag.name}</span></a>
                {/foreach}
              </div>
            </div>
            {/if}

            <!-- previous next -->
            {if $prevNext}
            <div class="pre-next">
              <div class="pre">
                <a href="{$prevNext.prev.url}" class="layui-btn layui-btn-primary layui-btn-sm">上一页</a>
                {$prevNext.prev.title}
              </div>
              <div class="next">
                <a href="{$prevNext.next.url}" class="layui-btn layui-btn-primary layui-btn-sm">下一页</a>
                {$prevNext.next.title}
              </div>
            </div>
            {/if}
          </div>

          <hr class="layui-bg-gray top-25">

          <!-- coment -->

          <div class="comment top-25">
            <div class="block-header">
              <h2>
                评论区
              </h2>
            </div>
            <!-- form -->
            {if !$article.disallow}
            <div class="comment-form">
              <form class="layui-form" action="">
                <div class="layui-form-item">
                  <textarea class="layui-textarea" name="comment" required lay-verify="required" placeholder="请输入"></textarea>
                </div>
                <div class="layui-form-item">
                  <button class="layui-btn" lay-submit lay-filter="formComment">立即提交</button>
                </div>
              </form>
            </div>
            {/if}

            <!-- comment list -->
            <div class="comment-list top-25">
              <ul id="comment_box">
              </ul>
              <!-- pager -->
              <div id="pagination" class="flex-def flex-zCenter top-25">
                <div id="pager"></div>
              </div>
            </div>
          </div>

          <!-- /coment -->
        </div>
      </div>
      <div class="layui-col-md3">
        <!-- 文章 -->
        <div class="block hot-article">
          <div class="block-header flex-def flex-zBetween">
            <h2>热门文章</h2>
            <a href="{:url('index/hot')}" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          <ul class="hot-article-wrap">
            {if empty($activeArticles)}<li>无数据</li>{/if}
            {foreach $activeArticles as $item}
            <li class="hot-article-item">
              <a href="{:url('article/read',['id'=>$item.id])}">{$item.title}</a>
              {if $item.image}
              <div class="hot-img">
                <img src="{$item.imageUrl}">
              </div>
              {/if}
            </li>
            {/foreach}
          </ul>
        </div>

        <!-- 话题 -->
        <div class="block top-25 medium-card">
          <div class="block-header">
            <h2>推荐话题</h2>
            <a href="/index.php/index/topic/index?user_id=1" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          {if empty($activeTopics)}无数据{/if}
          {foreach $activeTopics as $item}
          <div>
            <div class="medium-top">
              <div>
                <img src="{$item.imageUrl}">
                <a href="{:url('topic/read',['id'=>$item.id])}"><h3>{$item.name}</h3></a>
              </div>
              <a href="javascript:;" class="focus">订阅</a>
              <!--<a class="unfocus" href="javascript:;">已订阅</a>-->
            </div>
            <div class="medium-bottom">
              {$item.desc}
            </div>
          </div>
          {/foreach}

        </div>
      </div>
    </div>
  </div>
</section>
{/block}
